<template>
	<div :id="containerId" style="z-index: 9999;">
	</div>
</template>

<script setup>
	import {
		reactive,
		ref,
		inject,
		onMounted
	} from 'vue';
	import ECharts from 'vue-echarts'
	import * as echarts from 'echarts';
	const axios = inject("axios");
	const aqiBars = reactive([]);
	const props = defineProps({
		text: {
			type: String,
			required: true
		},
		containerId: {
			type: String,
			required: true
		}
	});
	const colorsMap = {
		'二氧化硫（SO2）浓度超标统计': '#409eff', // 示例颜色
		'一氧化碳（CO）浓度超标统计': '#4CAF50',
		'悬浮颗粒物（PM2.5）浓度超标统计': '#f56c6c'
	};
	const pollutantColor = colorsMap[props.text];
	// 初始化 ECharts 图表实例
	async function fetchAqiData() {
		let url = "/api/statistic/provinceGroup";
		await axios.get(url).then((r) => {
			if (r.data.ok) {
				r.data.data.provinceVO.forEach((level, index) => {
					const singleAqiLevel = reactive({
						name: '',
						value: ''
					});
					singleAqiLevel.name = level.provinceAbbr;
					if (props.text == "二氧化硫（SO2）浓度超标统计") {
						singleAqiLevel.value = level.so2ExceedSum;
					} else if (props.text == "一氧化碳（CO）浓度超标统计") {
						singleAqiLevel.value = level.coExceedSum;
					} else if (props.text == "悬浮颗粒物（PM2.5）浓度超标统计") {
						singleAqiLevel.value = level.pmExceedSum;
					}
					aqiBars.push(singleAqiLevel);
				});
				console.log(aqiBars);
				initializeChart();
			}
		});
	}

	function initializeChart() {
		let myCharts = echarts.init(document.getElementById(props.containerId));
		let option = {
			title: {
				text: props.text, // 这里设置标题文本  
				left: 'center', // 可以设置标题的位置，默认为'left'  
				textStyle: { // 设置文字样式
					fontSize: 14, // 字体大小
					fontWight: 700,
					color: '#fff'
				},
			},
			xAxis: {
				type: 'category',
				data: aqiBars.map(item => item.name)
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: aqiBars.map(item => item.value),
				type: 'bar',
				itemStyle: {
					color: pollutantColor,
				}
			}]
		};
		console.log(props.text)
		myCharts.setOption(option);
	}
	onMounted(async () => {
		await fetchAqiData();
	});
</script>

<style>
</style>